<template>
  <view class="container" style="padding-bottom: 90px">
    <!--  tab 栏 -->
    <view class="wh100">
      <view class="tabs">
        <u-tabs :list="tabMenus" lineColor="#F3C45D" lineWidth="30" keyName="text" :activeStyle="activeStyle" @click="onTabClick"></u-tabs>
      </view>
      <view class="data-empty-wh100" v-if="pageList == null || pageList.length == 0">
        <u-empty text="备注为空~~" />
      </view>
      <view v-else class="items-container" style="padding-bottom: 90px">
        <view
          @click="onItemClick(item)"
          class="items"
          :id="`menu-${item.id}`"
          v-for="(item, index) in pageList"
          :key="item.id"
          style="margin: 15px 20rpx; background-color: #fff; border-radius: 10px; padding: 12px 15px; display: flex; justify-content: space-between"
        >
          <text class="ellipsis-single">{{ item.content }}</text>
        </view>

        <!-- 加载更多 -->
        <u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" :loadmore="onReachBottomEvent" line />
      </view>
    </view>

    <view class="bottom-add" @click="btnAddClick">新建备注</view>
  </view>
</template>

<script>
import { uNavigateTo, uShowLoading, uHideLoading, utoast, umodal } from '../../../utils/uniUtils.js';
import { remarkTypeEnum } from '../../../constants/normalConstants';
import { GetFoodTagList } from '../../../common/api';
export default {
  data() {
    return {
      activeStyle: {
        color: '#F3C45D'
      },
      loadStatus: 'loadmore',
      loadingText: '努力加载中。。。',
      loadmoreText: '上拉加载更多~~',
      nomoreText: '已全部加载~~',

      curCataIdx: 0,
      tabMenus: remarkTypeEnum, // 上tab
      leftMenus: [], // 左tab
      pageList: [], // 内容列表
      disabled: true, // 禁用
      lock: false, // 节流锁

      /* 分页数据区域 */
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false
    };
  },
  onReachBottom() {
    this.onReachBottomEvent();
  },
  async mounted() {
    this.GetFoodTagList();
  },
  methods: {
    /**
     * 触底事件
     */
    onReachBottomEvent() {
      console.log('onReachBottom');
      // 拉新数据再拼接
      if (this.pageList.length < this.total) {
        this.showLoadMore = true;
        setTimeout(async () => {
          uShowLoading();
          if (this.showLoadMore) {
            this.pageNum += 1;
          }
          this.loadStatus = 'loading';
          await this.GetFoodTagList();
          uHideLoading();
        }, 300);
      } else {
        // utoast("没有更多数据了!", toastIconEnum.error);
        return;
      }
    },

    /**
     *  上tab栏 点击事件
     */
    async onTabClick(e) {
      // console.log(e, "e");
      if (this.curCataIdx == e.index) {
        return;
      }
      this.curCataIdx = e.index;
      this.pageNum = 1;
      this.pageList = [];
      await this.GetFoodTagList(e.index);
    },

    /**
     * 获取备注列表
     */
    async GetFoodTagList(idx = 0) {
      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      if (this.tabMenus[idx] != null) {
        let {
          data: { list, total }
        } = await GetFoodTagList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: this.tabMenus[idx].value
        });
        this.pageList = [...this.pageList, ...list];
        this.total = total;
        if (this.pageList.length == this.total) {
          this.loadStatus = 'nomore';
        } else {
          this.loadStatus = 'loadmore';
        }
        this.showLoadMore = false; // console.log("tagList", list);
      }
    },
    /**
     * 添加按钮点击事件
     */
    async btnAddClick() {
      uNavigateTo('/pages/workbench/remark/doEdit?mode=add&type=' + this.tabMenus[this.curCataIdx].value);
    },

    onItemClick(item) {
      uni.navigateTo({
        url: '/pages/workbench/remark/doEdit?mode=edit&id=' + item.id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100.1vh;
  .tabs {
    position: sticky;
    top: 0;
    background-color: #fff;
  }
  .details {
    background-color: #fff;
  }

  .bottom-add {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #f3c45d;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    z-index: 9999;
  }
}
</style>
